<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>狗狗</title>
    <link rel="stylesheet" href="css/header.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
    <script src="js/jquery-3.1.0.js" charset="utf-8"></script>
    <style media="screen">
    .nav{
     width: 100%;
     height: 40px;
     background: rgb(255, 102, 85);
   }
    .nav ul{
     width: 1180px;
     height: 100%;
     margin: auto;
   }
   .nav ul li{
     display: inline-block;
     float: left;
     border-left: 2px solid rgb(227, 83, 66);
   }
   .nav ul li:hover{
     background: rgb(238, 85, 68);
   }
   .nav ul li a{
     height: 40px;
     font-size: 1.2rem;
     color: white;
     line-height: 40px;
     text-decoration: none;
     display: inline-block;
     padding: 0px 20px;
   }
    </style>
</head>

<body>
    <!--  头部-->
    <div class="header">
        <div class="head">
            <ul class="firstHead">
              <li><a href="index.html" target="_blank">波奇首页</a></li>
                <li><a href="shop.html" target="_blank">波奇商城</a></li>
                <li><a href="serve.html" target="_blank">波奇服务</a></li>
                <li><a href="message.html" target="_blank">波奇论坛</a></li>
                <li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
            </ul>
            <ul class="attention">
                <li><a href="script:;">关注我们<span><img src="" alt="" /></span></a></li>
                <li><a href="script:;">帮助中心</a></li>
                <li><a href="script:;"><span><img src="" alt="" /></span>收藏</a></li>
            </ul>
            <ul class="register">
                <li><a href="login.html" target="_blank">登陆</a></li>
                <li><a href="script:;">|</a></li>
                <li><a href="register.html" target="_blank">免费注册</a></li>
            </ul>
            <ul class="userLogin">
                <li>
                    <a href="script:;" id="userName"></a>
                </li>
                <li>|</li>
                <li><a href="script:;" id="quit">退出</a></li>
            </ul>

        </div>
    </div>
    <div class="navigation">
        <div class="logo">
            <img src="source/images/logo.gif" alt="" />
        </div>
        <div class="serch">
            <input id="keyword" type="text" name="name" value="" placeholder="请输入关键字">
            <img id="search" src="source/images/ind_sch.png" alt="" />
        </div>
        <div class="app">
            <a href="script:;"><img src="source/images/app.jpeg" alt="" /></a>
        </div>
    </div>
    <div class="nav">
      <ul>
        <li style="background:rgb(238,85,68)"><a href="index.html">首页</a></li>
        <li><a href="dog.html">狗狗</a></li>
        <li><a href="mao.html">猫咪</a></li>
        <li><a href="xiaochong.html">小宠</a></li>
        <li><a href="shuizu.html">水族</a></li>
        <li><a href="pachong.html">爬虫</a></li>
        <li class="li1"><a href="serve.html"><span><img src="" alt="" /></span>波奇服务</a></li>
        <li class="li2"><a href="shop.html"><span><img src="" alt="" /></span>波奇商城</a></li>
      </ul>
    </div>
    <div class="content">
        <div class="img_cont">
            <div class="img_body">
                <a class="banner left" href="gou/index2.html#">
                    <img src="source/img/1.jpg" alt="" />
                    <dl>
                        <dt>爱的引导：导盲犬乘地铁，遇见请别害怕我</dt>
                        <dd>5月1，《北京市轨道交通运营安全条例》将正式实施，该条例明确规定，视力残障者可携带导盲犬进站乘车，这...</dd>
                    </dl>
                </a>
                <div class="hot right">
                    <div class="hot_tit">
                        <h2>热门专题</h2>
                    </div>
                    <dl>
                        <dt><a href="gou/index3.html">狗狗聪明度排行榜TOP30全解析</a></dt>
                        <dd>相信养狗的主人一定都会非常关心自家的狗宝贝有没有进...</dd>
                    </dl>
                    <dl>
                        <dt><a href="gou/index4.html#">冬季到了，巧主人为狗狗量体裁衣吧</a></dt>
                        <dd>有一种冷，叫主人觉得你很冷。 冬季到了，越来越多的...</dd>
                    </dl>
                    <dl>
                        <dt><a href="gou/index5.html#">我很二，但是我很温柔——哈士奇养成记</a></dt>
                        <dd>哈士奇又叫西伯利亚雪撬犬，是比较常见的中型犬，随着...</dd>
                    </dl>
                    <dl>
                        <dt><a href="gou/index6.html#">贵宾犬养护不得不知道的事</a></dt>
                        <dd>贵宾犬是目前国内最受欢迎的犬种之一，它们以其聪明伶...</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="body_auto">
            <div class="baike mt25" id="baike">
                <div class="baike_tit">
                    <h2><a href="script:;">狗狗百科»</a></h2>
                    <div class="baike_nav navBaike">
                        <a href="script:;">狗狗饲养</a>
                        <a href="script:;">狗狗训练</a>
                        <a href="script:;">狗狗医疗</a>
                    </div>
                    <em class="right"></em>
                </div>
                <!-- 狗狗百科和推荐专家的父级 -->
                <div class="bk_top">
                    <!-- 狗狗训练、饲养、医疗 -->
                    <div class="bk_top_left">
                        <div class="tempWrap" style="position:relative;height:270px;">
                            <!-- 狗狗训练、饲养、医疗 的内容 -->
                            <div class="bk_top_l bd bkBd" style="overflow:hidden;height:270px;position:relative;padding: 0px;margin:0px;top:0px;">
                                <!-- 狗狗饲养 -->
                                <div class="bk_top_list bkTop" style="height:270px;padding-top:20px">

                                </div>
                                <!-- 狗狗训练 -->
                                <div class="bk_top_list bkTop" style="height:270px;padding-top:20px">

                                </div>
                                <!-- 狗狗医疗 -->
                                <div class="bk_top_list bkTop" style="height:270px;padding-top:20px">

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 推荐专家 -->
                    <div class="experts right">
                        <div class="experts_tit">
                            <a href="script:;">推荐专家»</a>
                        </div>
                        <div class="experts_body">
                            <div class="experts_cont" style="width:1290px;">
                                <dl>
                                    <dt>
                                   <a href="script:;"><img src="source/img/5.jpg" alt="" /></a>
                                      </dt>
                                    <dd>
                                        <h3>沃晓波</h3>
                                        <a class="her" href="script:;">
                                            <em></em> "向TA提问"
                                        </a>
                                    </dd>
                                    <dd class="cont">
                                        "上海农林学院动物医学毕业，专供畜牧兽医、宠物疾病、保育保种等科目。曾在宠物繁殖场任兽医一职，负责兽医卫生以及动物繁殖保育工作。吸取和借鉴了许...["
                                        <a href="script:;">详细</a>"]"
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                      <a href="script:;"><img src="source/img/5.jpg" alt="" /></a>
                                      </dt>
                                    <dd>
                                        <h3>沃晓波</h3>
                                        <a class="her" href="script:;">
                                            <em></em> "向TA提问"
                                        </a>
                                    </dd>
                                    <dd class="cont">
                                        "上海农林学院动物医学毕业，专供畜牧兽医、宠物疾病、保育保种等科目。曾在宠物繁殖场任兽医一职，负责兽医卫生以及动物繁殖保育工作。吸取和借鉴了许...["
                                        <a href="script:;">详细</a>"]"
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                      <a href="script:;"><img src="source/img/5.jpg" alt="" /></a>
                                      </dt>
                                    <dd>
                                        <h3>沃晓波</h3>
                                        <a class="her" href="script:;">
                                            <em></em> "向TA提问"
                                        </a>
                                    </dd>
                                    <dd class="cont">
                                        "上海农林学院动物医学毕业，专供畜牧兽医、宠物疾病、保育保种等科目。曾在宠物繁殖场任兽医一职，负责兽医卫生以及动物繁殖保育工作。吸取和借鉴了许...["
                                        <a href="script:;">详细</a>"]"
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                     <a href="script:;"><img src="source/img/5.jpg" alt="" /></a>
                                    </dt>
                                    <dd>
                                        <h3>沃晓波</h3>
                                        <a class="her" href="script:;">
                                            <em></em> "向TA提问"
                                        </a>
                                    </dd>
                                    <dd class="cont">
                                        "上海农林学院动物医学毕业，专供畜牧兽医、宠物疾病、保育保种等科目。曾在宠物繁殖场任兽医一职，负责兽医卫生以及动物繁殖保育工作。吸取和借鉴了许...["
                                        <a href="script:;">详细</a>"]"
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                    <a href="script:;"><img src="source/img/5.jpg" alt="" /></a>
                                     </dt>
                                    <dd>
                                        <h3>沃晓波</h3>
                                        <a class="her" href="script:;">
                                            <em></em> "向TA提问"
                                        </a>
                                    </dd>
                                    <dd class="cont">
                                        "上海农林学院动物医学毕业，专供畜牧兽医、宠物疾病、保育保种等科目。曾在宠物繁殖场任兽医一职，负责兽医卫生以及动物繁殖保育工作。吸取和借鉴了许...["
                                        <a href="script:;">详细</a>"]"
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="experts_num">
                            <span class="current"></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="experts_bot">
                            <a href="script:;" class="question">
                                <em></em> "问答专区"
                            </a>
                            <a href="script:;" class="ask">
                                <em></em> "我要提问"
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 狗狗大全 -->
                <div class="hot_pet mt20">
                    <div class="hot_pet_tit">
                        <h2><a href="script:;">狗狗大全»</a></h2>
                    </div>
                    <div class="hot_pet_cont hot_pet_cont_xy" id="animaldog">

                    </div>
                </div>
            </div>
            <div class="baike mt25" id="use">
                <div class="baike_tit use_tit">
                    <h2><a href="script:;">狗狗用品»</a></h2>
                    <div class="baike_nav use_nav dogNav">
                        <a href="script:;">日用品</a>
                        <a href="script:;">狗粮</a>
                        <a href="script:;">保健品</a>
                        <a href="script:;">衣服窝</a>
                    </div>
                    <em class="use_tit_r right"></em>
                </div>
                <div class="use_cont">
                    <!-- 吃货不缺零食 -->
                    <div class="use_left left">
                      <a href="#"><img src="gou/img/8.jpg" alt="" width="170" height="170"/></a>
                      <a href="#"><img src="gou/img/88.jpg" alt="" width="170" height="170"/></a>
                      <a href="#"><img src="gou/img/89.jpg" alt="" width="170" height="170"/></a>
                    </div>
                    <!-- 中间内容 -->
                    <div class="use_center left bd">
                        <div class="user_c">

                        </div>
                        <div class="user_c">

                        </div>
                        <div class="user_c">

                        </div>
                        <div class="user_c">

                        </div>
                    </div>
                    <!-- 波奇推荐 -->
                    <div class="use_right right">
                      <div class="groom">
                        <div class="groom_tit">
                          波奇推荐
                        </div>
                        <dl>
                          <dt>
                            <a href="#"><img src="gou/img/90.jpg" alt="" width="80" height="80" /></a>
                          </dt>
                          <dd class="name">
                            <a href="#">Mind up犬用含药用发酵粉硅橡胶牙刷</a>
                          </dd>
                          <dd>¥56.7</dd>
                        </dl>
                        <dl>
                          <dt>
                            <a href="#"><img src="gou/img/91.jpg" alt="" width="80" height="80" /></a>
                          </dt>
                          <dd class="name">
                            <a href="#"> 冠能PRO PLAN 中型犬幼犬全价狗粮1.3kg</a>
                          </dd>
                          <dd>¥100</dd>
                        </dl>
                        <dl>
                          <dt>
                            <a href="#"><img src="gou/img/92.jpg" alt="" width="80" height="80" /></a>
                          </dt>
                          <dd class="name">
                            <a href="#">怡亲 宠物狗尿片单片 抗菌除臭尿布尿垫尿不湿</a>
                          </dd>
                          <dd>¥0.3</dd>
                        </dl>
                      </div>

                      <div class="brand mt25">
                        <div class="groom_tit brand_tit">
                          热门品牌
                        </div>
                      <div class="brand_list">
                        <a href="#"><img src="gou/img/93.jpg" alt="" width="118" height="53" /></a>
                        <a href="#"><img src="gou/img/94.jpg" alt="" width="118" height="53" /></a>
                        <a href="#"><img src="gou/img/95.jpg" alt="" width="118" height="53" /></a>
                        <a href="#"><img src="gou/img/96.jpg" alt="" width="118" height="53" /></a>
                        <a href="#"><img src="gou/img/97.jpg" alt="" width="118" height="53" /></a>
                        <a href="#"><img src="gou/img/98.jpg" alt="" width="118" height="53" /></a>
                      </div>
                      </div>
                    </div>
                  </div>
                </div>

                </div>
            </div>
        </div>
    </div>
    <div class="ensure">
        <div class="ensure_img">
            <img src="source/images/ensure.png" alt="" />
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="script:;">关于我们</a></li>|
            <li><a href="script:;">友情链接</a></li>|
            <li><a href="script:;">诚聘英才</a></li>|
            <li><a href="script:;">联系我们</a></li>|
            <li><a href="script:;">网站地图</a></li>|
            <li><a href="script:;">意见反馈</a></li>|
            <li><a href="script:;">帮助中心</a></li>|
            <li><a href="script:;">客服热线：123456789</a></li>
        </ul>
        <p>
            Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
        </p>
    </div>
</body>

</html>
<script src="js/jquery-3.1.0.js" charset="utf-8"></script>
<script type="text/javascript">

var register = document.getElementsByClassName("register")[0];
var userLogin =document.getElementsByClassName("userLogin")[0];
var userName = document.getElementById("userName");
var quit = document.getElementById("quit");
window.ready = readStorage();
setInterval(readStorage,2000);
//读取storage的数据
function readStorage(){
  var storage = window.localStorage;
  if (typeof(storage["user"])=='undefined') {
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else if(storage["user"]==""){
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else {
    var myDate =  new Date();
    var currenTime = myDate.getTime();
    if (currenTime >= Number(storage["userTime"])+3600000) {
      storage["user"] =="";
    }else {
        register.style.display ="none";
        userLogin.style.display = "inline-block";
        userName.innerText = storage["user"];
    }

  }
}
quit.onclick = function (){
  var storage = window.localStorage;
  register.style.display ="inline-block";
  userLogin.style.display = "none";
  storage["user"] = "";
}
    //获取class函数
    function byClass($) {
        return document.getElementsByClassName($) ? document.getElementsByClassName($) : -1;
    }
    //选测器函数 单个
    function byQst($) {
        return document.querySelector($) ? document.querySelector($) : -1;
    }
    //选择器函数 多个
    function byQstAll($) {
        return document.querySelectorAll($) ? document.querySelectorAll($) : -1;
    }
    //     .baike_nav a:hover {
    //     color: #f65;
    //     background:
    // }
    // bk_top_l bd  父级
    // bk_top_list 自己
    var colorA = byQstAll(".navBaike a");
    var indexOver; //移入下标
    for (var i = 0; i < colorA.length; i++) {
        colorA[i].index = i;
        colorA[i].onmouseover = function(event) {
            event = event || window.event;
            indexOver = event.target.index;
            changeBackground(indexOver);
            showContent(indexOver);
        }
    }

    function changeBackground(a) {
        for (var i = 0; i < colorA.length; i++) {
            colorA[i].style.color = "black";
            colorA[i].style.backgroundImage = "none";
        }
        colorA[a].style.color = "#f65";
        colorA[a].style.background = 'url(source/img/nav_bj.png) no-repeat center bottom';
    }

    function showContent(b) {
        var topShow = byClass("bkTop")[b].offsetTop;
        $(".bkBd").animate({
            scrollTop: topShow,
        }, 800);
    }
    // 处理狗狗用品
    var dogA = byQstAll(".user_c");
    dogA[0].style.display = "block";
    var dogTitle = byQstAll(".dogNav a");
    var indexDog; //移入下标
    for (var i = 0; i < dogTitle.length; i++) {
        dogTitle[i].index = i;
        dogTitle[i].onmouseover = function(event) {
            event = event || window.event;
            indexDog = event.target.index;
            changeDog(indexDog);
            showDog(indexDog);
        }
    }

    function changeDog(c) {
        for (var i = 0; i < dogTitle.length; i++) {
            dogTitle[i].style.color = "black";
            dogTitle[i].style.backgroundImage = "none";
        }
        dogTitle[c].style.color = "#f65";
        dogTitle[c].style.background = 'url(source/img/nav_bj.png) no-repeat center bottom';
    }
    // 处理狗狗用品商品的出现
    function showDog(d) {
        for (var i = 0; i < dogA.length; i++) {
            dogA[i].style.display = "none";
        }
        dogA[d].style.display = "block";
    }

//请求数据
      var xmlhttp
      if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHttp")
      }else {
        xmlhttp = new XMLHttpRequest()
      }
      var area = 1;
      var j = 1;
      var url = "php/pet.php?kind1=1&kind2="+j;
      console.log(url);
      xmlhttp.open("get",url,true);
      xmlhttp.send(null);
      xmlhttp.onreadystatechange = function (){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
           obj = JSON.parse(xmlhttp.response);
           switch (area) {
             case 1:
               var bkTop = document.getElementsByClassName("bkTop");
               for (var i = 0; i < 6; i++) {
                 objbody = JSON.parse(obj[i]);
                 var a = document.createElement("a");
                 a.href = "article.html?"+objbody.title;
                 a.innerHTML = '<dl><dt><div class="opa"></div><img src="'+objbody.imgurl1+'" alt="" /></dt><dd class="name">'+objbody.title+'</dd><dd id ="'+objbody.wrap+'"></dd></dl>';
                 bkTop[j-1].appendChild(a);
                 $('#'+objbody.wrap).load('data2.html #'+objbody.wrap+1);
                }
               j++;
               if (j>3) {
                 area++;
                 j = 1;
                 url = "php/animalkind.php?kind=1";
                 console.log(url);
                 xmlhttp.open("get",url,true);
                 xmlhttp.send(null);
               }else {
                url = "php/pet.php?kind1=1&kind2="+j;
                 xmlhttp.open("get",url,true);
                 xmlhttp.send(null);
               }
               break;
             case 2:
              var animaldog = document.getElementById("animaldog");
              for (var i = 0; i < 6; i++) {
                objbody = JSON.parse(obj[i]);
                var dl = document.createElement("dl");
                dl.className = "m_right";
                dl.innerHTML = '<dt><a href="animalShow.html?'+objbody.name+'"><img src="'+objbody.imgurl1+'" alt="" width="180" height="135" /></a></dt><dd><a href="animalShow.html?'+objbody.name+'">'+objbody.name+'</a></dd>'
                animaldog.appendChild(dl);
              }
              area++;
              url = "php/kind.php?kind="+j;
              console.log(url);
              xmlhttp.open("get",url,true);
              xmlhttp.send(null);
              break;
             case 3:
              var user_c = document.getElementsByClassName("user_c");
              for (var i = 0; i < 6; i++) {
                objbody = JSON.parse(obj[i]);
                var dl = document.createElement("dl");
                dl.innerHTML = '<dt><a href="show.html?'+objbody.id+'"><img src="'+objbody.imgurl1+'" alt="" width="200" height="200"  /></a></dt><dd><a href="show.html?'+objbody.id+'">'+objbody.name+'</a></dd><dd>¥'+objbody.tthisprice+'</dd>';
                user_c[j-1].appendChild(dl);
              }
              j++;
              if (j<=4) {
                url = "php/kind.php?kind="+j;
                console.log(url);
                xmlhttp.open("get",url,true);
                xmlhttp.send(null);
              }
              break;
           }
         }
       }

       var keyword = document.getElementById("keyword");
       var search = document.getElementById("search");
       search.onclick = function () {
         if (!keyword.value) {
           keyword.focus();
         }else{
           window.open('wares.html?'+keyword.value);
         }
       }
</script>
